<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="拼音识词语在线学习工具，通过互动游戏帮助学习汉字词语，提高拼音识字能力">
    <meta name="keywords" content="拼音识词语,拼音学习,词语学习,拼音练习,拼音游戏">
    <title>拼音识词语 | 互动学习工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3a0ca3;
            --accent: #4cc9f0;
            --light: #f8f9fa;
            --dark: #212529;
            --success: #4ade80;
            --warning: #facc15;
            --danger: #f87171;
            --border-radius: 12px;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

        /* 字体设置 */
        @font-face {font-family:pinyin;src:url('/i/pinyin.ttf');}
        .pymp3,.py{font-family:pinyin;}

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'pinyin','Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: var(--dark);
            min-height: 100vh;
            line-height: 1.6;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header Styles */
        header {
            background: linear-gradient(to right, var(--primary), var(--secondary));
            color: white;
            padding: 20px 0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 10px;
        }

        .logo-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            background: white;
            border-radius: 50%;
            box-shadow: var(--shadow);
            font-size: 2rem;
            color: var(--primary);
        }

        .logo-text {
            display: flex;
            flex-direction: column;
        }

        .logo h1 {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .logo p {
            font-size: 1rem;
            opacity: 0.9;
        }

        .nav-menu {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
        }

        .nav-btn {
            padding: 12px 20px;
            background: rgba(255, 255, 255, 0.15);
            font-size: 1rem;
            color: white;
            border: none;
            border-radius: var(--border-radius);
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 5px 0;
            position: relative;
            overflow: hidden;
            text-decoration:none;
        }

        .nav-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }

        .nav-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
        }

        .nav-btn:hover::before {
            transform: translateX(0);
        }

        .nav-btn.active {
            background: white;
            color: var(--primary);
            box-shadow: 0 4px 10px rgba(67, 97, 238, 0.3);
        }

        /* Main Content */
        .main-content {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
            padding: 30px 0;
        }

        /* 拼音识词语游戏区域 */
        .game-container {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 30px;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
        }

        .game-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .game-title {
            font-size: 2.2rem;
            color: var(--secondary);
            margin-bottom: 15px;
            background: linear-gradient(45deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
            display: inline-block;
        }

        .game-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: var(--accent);
            border-radius: 2px;
        }

        .game-desc {
            font-size: 1.1rem;
            color: #555;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.8;
        }

        /* 游戏主体 */
        .game-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;
            padding: 20px;
        }

        /* 拼音卡片 */
        .pinyin-card {
            width: 100%;
            max-width: 600px;
            padding: 30px;
            background: linear-gradient(145deg, #f0f5ff, #e6edff);
            border-radius: var(--border-radius);
            box-shadow: 0 10px 30px rgba(67, 97, 238, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--primary);
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            text-align: center;
            min-height: 180px;
            font-family: 'pinyin', sans-serif;
        }

        .pinyin-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
            transform: translateX(-100%);
            transition: transform 0.8s ease;
        }

        .pinyin-card:hover::before {
            transform: translateX(100%);
        }

        /* 词语选项区域 */
        .word-options {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            width: 100%;
            max-width: 800px;
        }

        @media (min-width: 768px) {
            .word-options {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .word-option {
            padding: 25px 15px;
            background: linear-gradient(145deg, #ffffff, #f8f9fa);
            border-radius: var(--border-radius);
            border: 2px solid #e0e0e0;
            font-size: 2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            min-height: 120px;
            box-shadow: var(--shadow);
        }

        .word-option:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            border-color: var(--accent);
        }

        .word-option.correct {
            background: linear-gradient(145deg, #e6f7ed, #d1f3df);
            border-color: var(--success);
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(74, 222, 128, 0.4);
        }

        .word-option.incorrect {
            background: linear-gradient(145deg, #fce8e8, #fad4d4);
            border-color: var(--danger);
        }

        .word-option.selected {
            transform: scale(1.05);
            box-shadow: 0 0 0 4px rgba(76, 201, 240, 0.4);
            border-color: var(--accent);
            z-index: 2;
        }

        .word-option .status-icon {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 1.5rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .word-option.correct .status-icon {
            color: var(--success);
            opacity: 1;
        }

        .word-option.incorrect .status-icon {
            color: var(--danger);
            opacity: 1;
        }

        /* 反馈区域 */
        .feedback-area {
            width: 100%;
            max-width: 600px;
            min-height: 100px;
            padding: 20px;
            border-radius: var(--border-radius);
            background: rgba(248, 249, 250, 0.9);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.5s ease;
            opacity: 0;
            transform: translateY(20px);
            border: 2px dashed var(--accent);
        }

        .feedback-area.show {
            opacity: 1;
            transform: translateY(0);
        }

        .feedback-text {
            font-size: 1.6rem;
            font-weight: 500;
        }

        .correct .feedback-text {
            color: var(--success);
        }

        .incorrect .feedback-text {
            color: var(--danger);
        }

        .meaning-text {
            font-size: 1.2rem;
            color: #555;
            font-style: italic;
        }

        /* 游戏统计 */
        .game-stats {
            display: flex;
            justify-content: center;
            gap: 30px;
            width: 100%;
            margin-top: 20px;
        }

        .stat-box {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 20px;
            min-width: 140px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .stat-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--accent);
        }

        .stat-label {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 10px;
        }

        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--secondary);
        }

        /* 控制按钮 */
        .controls {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }

        .control-btn {
            padding: 15px 30px;
            border-radius: var(--border-radius);
            border: none;
            font-size: 1.1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: var(--shadow);
        }

        .next-btn {
            background: linear-gradient(to right, var(--accent), var(--primary));
            color: white;
        }

        .next-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(76, 201, 240, 0.5);
        }

        .reset-btn {
            background: white;
            border: 2px solid var(--accent);
            color: var(--accent);
        }

        .reset-btn:hover {
            background: rgba(76, 201, 240, 0.1);
        }

        /* 动画效果 */
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0); }
            50% { transform: translateY(-15px) rotate(2deg); }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
            20%, 40%, 60%, 80% { transform: translateX(8px); }
        }

        @keyframes confetti {
            0% { 
                transform: translateY(0) rotate(0); 
                opacity: 1;
            }
            100% { 
                transform: translateY(100vh) rotate(720deg); 
                opacity: 0;
            }
        }

        .confetti {
            position: fixed;
            width: 12px;
            height: 12px;
            background: var(--success);
            opacity: 0;
            pointer-events: none;
            z-index: 1000;
            border-radius: 50%;
        }

        /* 进度条 */
        .progress-container {
            width: 100%;
            max-width: 600px;
            margin: 30px auto 0;
        }

        .progress-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .progress-bar {
            height: 12px;
            background: #e9ecef;
            border-radius: 10px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(to right, var(--accent), var(--primary));
            border-radius: 10px;
            transition: width 0.5s ease;
        }

        /* 粒子背景效果 */
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            background: rgba(76, 201, 240, 0.3);
            animation: floatParticle 15s infinite linear;
        }

        @keyframes floatParticle {
            0% { transform: translateY(0) translateX(0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 0.5; }
            100% { transform: translateY(-100vh) translateX(100px); opacity: 0; }
        }

        /* Footer */
        footer {
            background: var(--dark);
            color: white;
            padding: 40px 0 20px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }

        .footer-section h4 {
            font-size: 1.2rem;
            margin-bottom: 20px;
            color: var(--accent);
        }

        .footer-links {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .footer-link {
            display: inline-block;
            padding: 8px 15px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            color: white;
            text-decoration: none;
            transition: var(--transition);
        }

        .footer-link:hover {
            background: var(--primary);
        }

        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            opacity: 0.7;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .pinyin-card {
                font-size: 2.5rem;
                padding: 20px;
                min-height: 140px;
            }
            
            .word-options {
                grid-template-columns: 1fr;
            }
            
            .word-option {
                font-size: 1.8rem;
                min-height: 100px;
            }
            
            .game-stats {
                flex-wrap: wrap;
                gap: 15px;
            }
            
            .stat-box {
                min-width: calc(50% - 15px);
            }
        }

        @media (max-width: 480px) {
            .pinyin-card {
                font-size: 2rem;
            }
            
            .word-option {
                font-size: 1.5rem;
            }
            
            .stat-box {
                min-width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- 粒子背景 -->
    <div class="particles" id="particles"></div>
    
    <!-- Header -->
    <header>
        <div class="container header-container">
            <div class="logo">
                <div class="logo-icon">
                    <i class="fas fa-language"></i>
                </div>
                <div class="logo-text">
                    <h1>汉语拼音在线学习</h1>
                    <p>标准拼音发音点读工具</p>
                </div>
            </div>            
            <div class="nav-menu">
                <a href="/" class="nav-btn"><i class="fas fa-book"></i>学拼音</a>
                <a href="/shengdiao.html" class="nav-btn"><i class="fas fa-music"></i> 读声调</a>
                <a href="/yinjiebiao.html" class="nav-btn"><i class="fas fa-table"></i> 音节表</a>
                <a href="/pinyinshiciyu.html" class="nav-btn active"><i class="fas fa-check-double"></i> 拼音识词语</a>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <div class="container">
        <div class="main-content">
            <!-- 拼音识词语游戏 -->
            <div class="game-container">
                <div class="game-header">
                    <h2 class="game-title">拼音识词语</h2>
                    <p class="game-desc">
                        根据显示的拼音，从下方四个词语选项中选择正确的一个。选对自动进入下一题，每答对一题获得10分！
                    </p>
                </div>
                
                <div class="game-area">
                    <!-- 拼音展示卡片 -->
                    <div class="pinyin-card" id="pinyin-card">
                        <span id="pinyin-text">xué xí</span>
                    </div>
                    
                    <!-- 词语选项区域 -->
                    <div class="word-options" id="word-options">
                        <div class="word-option" data-value="学习">
                            学习
                            <i class="fas fa-check status-icon"></i>
                        </div>
                        <div class="word-option" data-value="学校">
                            学校
                            <i class="fas fa-times status-icon"></i>
                        </div>
                        <div class="word-option" data-value="学生">
                            学生
                            <i class="fas fa-times status-icon"></i>
                        </div>
                        <div class="word-option" data-value="学问">
                            学问
                            <i class="fas fa-times status-icon"></i>
                        </div>
                    </div>
                    
                    <!-- 反馈区域 -->
                    <div class="feedback-area" id="feedback-area">
                        <div class="feedback-text" id="feedback-text">回答正确！</div>
                        <div class="meaning-text" id="meaning-text">学习：通过阅读、听讲、研究、实践等获得知识或技能的过程</div>
                    </div>
                    
                    <!-- 游戏统计 -->
                    <div class="game-stats">
                        <div class="stat-box">
                            <div class="stat-label">当前得分</div>
                            <div class="stat-value" id="score">0</div>
                        </div>
                        <div class="stat-box">
                            <div class="stat-label">已答题目</div>
                            <div class="stat-value" id="answered">0</div>
                        </div>
                        <div class="stat-box">
                            <div class="stat-label">连续正确</div>
                            <div class="stat-value" id="streak">0</div>
                        </div>
                    </div>
                    
                    <!-- 进度条 -->
                    <div class="progress-container">
                        <div class="progress-header">
                            <span>学习进度</span>
                            <span id="progress-percentage">0%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
                        </div>
                    </div>
                    
                    <!-- 控制按钮 -->
                    <div class="controls">
                        <button class="control-btn reset-btn" id="reset-btn">
                            <i class="fas fa-redo"></i> 重新开始
                        </button>
                        <button class="control-btn next-btn" id="next-btn">
                            <i class="fas fa-arrow-right"></i> 下一题
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h4>学习资源</h4>
                    <div class="footer-links">
                        <a href="#" class="footer-link">拼音字母表</a>
                        <a href="#" class="footer-link">声母学习</a>
                        <a href="#" class="footer-link">韵母学习</a>
                        <a href="#" class="footer-link">声调练习</a>
                        <a href="shizitianpinyin.html" class="footer-link">识字选拼音</a>
                        <a href="pinyinshizi.html" class="footer-link">拼音识字</a>
                        <a href="pinyinshiciyu.html" class="footer-link">拼音识词语</a>
                        <a href="yinianji.html" class="footer-link">小学一年级</a>
                        <a href="ernianji.html" class="footer-link">小学二年级</a>                      
                    </div>
                </div>
                
                <div class="footer-section">
                    <h4>实用工具</h4>
                    <div class="footer-links">
                        <a href="diandu.html" class="footer-link">拼音点读</a>
                        <a href="pinyinceshi.html" class="footer-link">拼音测试</a>
                        <a href="pinyinyouxi.html" class="footer-link">拼音游戏</a>
                        <a href="hanzipinyin.html" class="footer-link">汉字转拼音</a>
                    </div>
                </div>
                
                <div class="footer-section">
                    <h4>友情链接</h4>
                    <div class="footer-links">
                        <a href="https://www.hanyupinyin.net" class="footer-link" target="_blank">汉语拼音官网</a>
                        <a href="https://youquhome.com/" class="footer-link" target="_blank">有趣网址之家</a>                        
                        <a href="https://www.bjtime.net/" class="footer-link" target="_blank">北京时间</a>
                        <a href="https://www.schulte.top/" class="footer-link" target="_blank">注意力训练游戏</a>
                        <a href="https://www.zitie123.cn/" class="footer-link" target="_blank">字帖训练</a>
                    </div>
                </div>
            </div>
            
            <div class="copyright">
                © 2023 HanYuPinYin.Net 汉语拼音在线学习平台 | 让汉语学习更简单
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 拼音和词语数据集
            const wordData = [
                { pinyin: "xué xí", word: "学习", meaning: "通过阅读、听讲、研究、实践等获得知识或技能的过程", options: ["学习", "学校", "学生", "学问"] },
                { pinyin: "lǎo shī", word: "老师", meaning: "传授知识、技能的人，尤指学校中的教师", options: ["老师", "老人", "老虎", "老实"] },
                { pinyin: "tóng xué", word: "同学", meaning: "在同一所学校学习的人", options: ["同学", "同事", "同样", "通知"] },
                { pinyin: "shū běn", word: "书本", meaning: "装订成册的著作", options: ["书本", "书法", "书店", "书写"] },
                { pinyin: "bǐ jì běn", word: "笔记本", meaning: "用来书写的本子，或指便携式电脑", options: ["笔记本", "笔记", "笔试", "笔者"] },
                { pinyin: "kè táng", word: "课堂", meaning: "进行教学活动的地方", options: ["课堂", "课程", "课文", "课题"] },
                { pinyin: "zuò yè", word: "作业", meaning: "教师布置给学生的功课任务", options: ["作业", "作用", "作家", "作品"] },
                { pinyin: "kǎo shì", word: "考试", meaning: "考查知识或技能的一种方法", options: ["考试", "考虑", "考核", "考验"] },
                { pinyin: "chéng jì", word: "成绩", meaning: "工作或学习所取得的成就或结果", options: ["成绩", "成功", "成为", "成长"] },
                { pinyin: "zhī shi", word: "知识", meaning: "人们在实践中获得的认识和经验的总和", options: ["知识", "知道", "智慧", "知觉"] }
            ];
            
            // 游戏状态
            let gameState = {
                currentIndex: 0,
                score: 0,
                answered: 0,
                streak: 0,
                progress: 0,
                currentWord: null,
                selectedOption: null,
                isAnswered: false
            };
            
            // DOM元素
            const pinyinCard = document.getElementById('pinyin-card');
            const pinyinText = document.getElementById('pinyin-text');
            const wordOptions = document.getElementById('word-options');
            const feedbackArea = document.getElementById('feedback-area');
            const feedbackText = document.getElementById('feedback-text');
            const meaningText = document.getElementById('meaning-text');
            const scoreEl = document.getElementById('score');
            const answeredEl = document.getElementById('answered');
            const streakEl = document.getElementById('streak');
            const progressFill = document.getElementById('progress-fill');
            const progressPercentage = document.getElementById('progress-percentage');
            const nextBtn = document.getElementById('next-btn');
            const resetBtn = document.getElementById('reset-btn');
            const particles = document.getElementById('particles');
            
            // 创建粒子背景
            function createParticles() {
                for (let i = 0; i < 30; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'particle';
                    
                    // 随机属性
                    const size = Math.random() * 20 + 5;
                    const posX = Math.random() * 100;
                    const posY = Math.random() * 100;
                    const delay = Math.random() * 15;
                    const duration = Math.random() * 10 + 15;
                    const color = `rgba(${Math.floor(Math.random() * 100)}, ${Math.floor(Math.random() * 200)}, ${Math.floor(Math.random() * 255)}, ${Math.random() * 0.4})`;
                    
                    particle.style.width = `${size}px`;
                    particle.style.height = `${size}px`;
                    particle.style.left = `${posX}%`;
                    particle.style.top = `${posY}%`;
                    particle.style.background = color;
                    particle.style.animationDelay = `${delay}s`;
                    particle.style.animationDuration = `${duration}s`;
                    
                    particles.appendChild(particle);
                }
            }
            
            // 初始化游戏
            function initGame() {
                gameState = {
                    currentIndex: 0,
                    score: 0,
                    answered: 0,
                    streak: 0,
                    progress: 0,
                    selectedOption: null,
                    isAnswered: false
                };
                
                updateStats();
                nextWord();
                hideFeedback();
            }
            
            // 获取下一个词语
            function nextWord() {
                gameState.currentIndex = Math.floor(Math.random() * wordData.length);
                gameState.currentWord = wordData[gameState.currentIndex];
                gameState.isAnswered = false;
                
                pinyinText.textContent = gameState.currentWord.pinyin;
                
                // 添加动画效果
                pinyinCard.style.animation = 'float 6s ease-in-out infinite';
                
                // 渲染选项
                renderOptions();
                hideFeedback();
            }
            
            // 渲染选项
            function renderOptions() {
                wordOptions.innerHTML = '';
                
                gameState.currentWord.options.forEach((option, index) => {
                    const optionEl = document.createElement('div');
                    optionEl.className = 'word-option';
                    optionEl.dataset.value = option;
                    optionEl.innerHTML = `
                        ${option}
                        <i class="fas fa-${option === gameState.currentWord.word ? 'check' : 'times'} status-icon"></i>
                    `;
                    
                    optionEl.addEventListener('click', () => selectOption(optionEl));
                    wordOptions.appendChild(optionEl);
                });
            }
            
            // 选择选项
            function selectOption(optionEl) {
                if (gameState.isAnswered) return;
                
                gameState.selectedOption = optionEl;
                gameState.isAnswered = true;
                
                const userAnswer = optionEl.dataset.value;
                const correct = gameState.currentWord.word;
                
                gameState.answered++;
                
                // 添加选中效果
                optionEl.classList.add('selected');
                
                // 延迟后显示结果
                setTimeout(() => {
                    if (userAnswer === correct) {
                        // 回答正确
                        optionEl.classList.add('correct');
                        handleCorrectAnswer();
                    } else {
                        // 回答错误
                        optionEl.classList.add('incorrect');
                        
                        // 标记正确答案
                        document.querySelectorAll('.word-option').forEach(opt => {
                            if (opt.dataset.value === correct) {
                                opt.classList.add('correct');
                            }
                        });
                        
                        handleIncorrectAnswer();
                    }
                    
                    updateStats();
                    showFeedback();
                }, 500);
            }
            
            // 处理正确答案
            function handleCorrectAnswer() {
                feedbackArea.className = 'feedback-area show correct';
                feedbackText.textContent = '回答正确！';
                meaningText.textContent = gameState.currentWord.meaning;
                
                gameState.score += 10;
                gameState.streak++;
                
                // 连续答对奖励
                if (gameState.streak >= 3) {
                    gameState.score += 5;
                    feedbackText.textContent = `太棒了！连续答对${gameState.streak}题 +5分`;
                }
                
                // 创建庆祝彩带效果
                createConfetti();
                
                // 自动进入下一题
                setTimeout(() => {
                    nextWord();
                }, 2000);
            }
            
            // 处理错误答案
            function handleIncorrectAnswer() {
                feedbackArea.className = 'feedback-area show incorrect';
                feedbackText.textContent = '再试一次！';
                meaningText.textContent = gameState.currentWord.meaning;
                
                gameState.streak = 0;
                
                // 添加抖动动画
                pinyinCard.style.animation = 'shake 0.5s ease-in-out';
                setTimeout(() => {
                    pinyinCard.style.animation = 'float 6s ease-in-out infinite';
                }, 500);
            }
            
            // 更新游戏统计
            function updateStats() {
                scoreEl.textContent = gameState.score;
                answeredEl.textContent = gameState.answered;
                streakEl.textContent = gameState.streak;
                
                // 更新进度
                const progress = Math.min(100, Math.round((gameState.answered/10)*100));
                gameState.progress = progress;
                progressFill.style.width = `${progress}%`;
                progressPercentage.textContent = `${progress}%`;
            }
            
            // 显示反馈
            function showFeedback() {
                feedbackArea.classList.add('show');
                nextBtn.style.display = 'inline-flex';
            }
            
            // 隐藏反馈
            function hideFeedback() {
                feedbackArea.classList.remove('show');
                nextBtn.style.display = 'none';
            }
            
            // 创建庆祝彩带效果
            function createConfetti() {
                const colors = ['#4361ee', '#3a0ca3', '#4cc9f0', '#4ade80', '#facc15'];
                
                for (let i = 0; i < 80; i++) {
                    const confetti = document.createElement('div');
                    confetti.className = 'confetti';
                    confetti.style.left = `${Math.random() * 100}vw`;
                    confetti.style.top = '-20px';
                    confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                    confetti.style.width = `${Math.random() * 12 + 8}px`;
                    confetti.style.height = `${Math.random() * 12 + 8}px`;
                    
                    // 随机形状
                    if (Math.random() > 0.7) {
                        confetti.style.borderRadius = '0';
                        confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
                    } else {
                        confetti.style.borderRadius = '50%';
                    }
                    
                    document.body.appendChild(confetti);
                    
                    // 动画
                    const animation = confetti.animate([
                        { transform: `translateY(0) rotate(0)`, opacity: 1 },
                        { transform: `translateY(${Math.random() * 500 + 300}px) rotate(${Math.random() * 720}deg)`, opacity: 0 }
                    ], {
                        duration: Math.random() * 3000 + 2000,
                        easing: 'cubic-bezier(0,0.9,0.57,1)'
                    });
                    
                    animation.onfinish = () => {
                        confetti.remove();
                    };
                }
            }
            
            // 事件监听
            nextBtn.addEventListener('click', nextWord);
            resetBtn.addEventListener('click', initGame);
            
            // 启动游戏
            createParticles();
            initGame();
        });
    </script>
</body>
</html>